﻿
//counter variabel keeps tabs on current level, level = the amount of numbers for the user to remember.
var level = 2;
//stores the generated numbers for the current level.
var numberArray = new Array();
var timer = 0;
var state = 0; //state determines if the user's to enter numbers in normal or reversed order from which they are shown, 0 = normal, 1 = reversed.

stage1Score = 0;
stage2Score = 0;

$(document).ready(function() {
    setIntegers(level);
    document.getElementById("btnHelp").style.display = "block";
    
});

//generates a number between min and max (both included)
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

//sets a number of randomized integers
function setIntegers(amount) {

    var array = [amount];
    var s = "";

    for (i = 0; i < amount; i++) {
        
        array[i] = getRandomInt(1, 9);
    }

    for (var a in array) {
        s += array[a] + "   ";
    }

    numberArray = array;
    $("#displayedNumbers").text(s);
}

//compares the randomized the numbers with the user's input

function checkNumbers(userInput) {

    if (state == 1) {
        numberArray.reverse();
    }
    if (JSON.stringify(userInput) == JSON.stringify(numberArray)) {
        
        answerArray.length = 0;
        currentAnswer = 0;
        level++;
        setIntegers(level);
        correct("Rätt!");
        
        setTimeout(function() {
            document.getElementById("input").innerHTML = "";
            numbersFadeIn();
            timer = 0;
        }, 1500);
    } else {
        correct("Fel!");
        setTimeout(function() {
            if (state == 0) {
                stage1Score = (parseInt(level) - 1);
                timer = 250;
                preStage2();
            } else {
                stage2Score = (parseInt(level) - 1);
                timer = 250;
                gameOver();
            }
        }, 1500);
    }
}

var answerArray = new Array();
var currentAnswer = 0;
var answerStringArray = new Array();

function underline() {
    for (var i = 0; i < numberArray.length; i++) {
        answerStringArray[i] = "_ ";
        document.getElementById("input").innerHTML += answerStringArray[i];
    }
    
}

function buttonClicked(objs) {

   
   // document.getElementById("answer").innerHTML += objs.value + " ";
    answerArray[currentAnswer] = parseInt(objs.value);
    
    document.getElementById("input").innerHTML = "";
    answerStringArray[currentAnswer] = objs.value + " ";
    for (var i = 0; i < answerStringArray.length; i++) {
        document.getElementById("input").innerHTML += answerStringArray[i];
    }
    

    currentAnswer++;

    if (answerArray.length == numberArray.length) {
        checkNumbers(answerArray);
    }
}

function erasor() {
    if (currentAnswer > 0) {
        //alert("answer innan: " + currentAnswer);
        currentAnswer--;
        //alert("answer efter: " + currentAnswer);
        answerStringArray[currentAnswer] = "_ ";
        document.getElementById("input").innerHTML = "";
        for (var i = 0; i < answerStringArray.length; i++) {
            document.getElementById("input").innerHTML += answerStringArray[i];
        }
    }
}

function numbersFadeIn() {
    $("#info").fadeOut(500);
    $("#inputButtons").fadeOut(500);
    $("#answer").fadeOut(500);
    $("#buttons").fadeOut(500);
    $("#help").fadeOut(500);
    setTimeout(function () {
        document.getElementById("info").innerHTML = "Memorera dessa siffror";
        $("#numbers").fadeIn(500);
        $("#info").fadeIn(500);
    }, 500);
   
}
function answerFadeIn() {
    $("#info").fadeOut(500);
    $("#numbers").fadeOut(500);
    setTimeout(function () {
        if (state == 0) {
            document.getElementById("info").innerHTML = "Skriv in siffrorna nedanför";
        } else {
            document.getElementById("info").innerHTML = "Skriv in siffrorna nedanför<br>Baklänges!";
        }
        $("#inputButtons").fadeIn(500);
        $("#answer").fadeIn(500);
        $("#info").fadeIn(500);
    }, 500);
}

function correct(result) {
    document.getElementById("correct").style.display = "block";
    if (result == "Fel!") {
        document.getElementById("correct").style.color = "red";
        document.getElementById("correct").innerHTML = result;
    } else {
        document.getElementById("correct").style.color = "green";
        document.getElementById("correct").innerHTML = result;
    }
    $("#correct").animate({
        left: "50px",
        bottom: "90px",
        opacity: 0
    }, 1000, function () {
        $("#correct").animate({
            left: "20px",
            bottom: "40px",
            opacity: 1
        });
        document.getElementById("correct").style.display = "none";
    });

}

function start() {
    setInterval(
    function () {
        if (timer == 50) {
            answerFadeIn();
            underline();
            timer = 60;
        }
        if (timer == 200) {
            checkNumbers(answerArray);
        }
        timer++;
        //document.getElementById("testp").innerHTML = timer;
    }
    , 100);

    $("#logo").fadeOut(500);
    numbersFadeIn();
}

function preStage2() {
    $("#info").fadeOut(500);
    $("#inputButtons").fadeOut(500);
    $("#answer").fadeOut(500);
    setTimeout(function () {
        document.getElementById("info").innerHTML = "Steg 1 är klart!";
        document.getElementById("helpText").innerHTML = "I nästa steg ska du skriva in siffrorna du ser BAKLÄNGES. <br><br> Klicka på fortsätt för att starta Steg 2.";
        $("#help").fadeIn(500);
        $("#info").fadeIn(500);
        $("#buttons").fadeIn(500);
        document.getElementById("btnHelp").style.display = "none";
        document.getElementById("btnContinue").style.display = "block";
    }, 500);

}

function stage2() {
    answerArray.length = 0;
    numberArray.length = 0;
    currentAnswer = 0;
    answerStringArray.length = 0;
    document.getElementById("input").innerHTML = "";
    state++;
    level = 2;
    setIntegers(level);
    numbersFadeIn();
    timer = 0;
}

function gameOver() {
    $("#info").fadeOut(500);
    $("#inputButtons").fadeOut(500);
    $("#answer").fadeOut(500);
    setTimeout(function () {
        document.getElementById("info").innerHTML = "Spelet är slut!";
        document.getElementById("helpText").innerHTML = "Poäng på steg ett = " + stage1Score + "<br>Poäng på steg två = " + stage2Score + "<br><br> Total poäng = "+(stage1Score + stage2Score);
        $("#help").fadeIn(500);
        $("#info").fadeIn(500);
        $("#buttons").fadeIn(500);
    }, 500);
    
    document.getElementById("btnSend").style.display = "block";
    document.getElementById("btnContinue").style.display = "none";
    
}

function showHelp() {
    $("#logo").fadeOut(500);
    $("#buttons").fadeOut(500);
    setTimeout(function () {
        document.getElementById("helpText").innerHTML = "Spelet går ut på att memorera siffror. Det kommer att visas ett antal siffror på skärmen. Du kommer få 5 sekunder på dig att memorera dessa siffror, därefter försvinner siffrorna, och du kommer att få 10 sekunder på dig att mata in de siffrorna som visades.<br /><br/> Klarar du detta kommer det visas siffror igen, denna gång en siffra mer än förut. Det kommer fortsätta så tills du misslyckas.<br/><br/> När du har misslyckats kommer du till steg två. Det är samma princip fast du ska skriva in siffrorna BAKLÄNGES. Du fortsätter tills du misslyckas. När du är färdig skickas resultatet.";
        document.getElementById("btnBack").style.display = "block";
        document.getElementById("btnHelp").style.display = "none";
        $("#help").fadeIn(500);
        $("#buttons").fadeIn(500);
    }, 500);

}

function showLogo() {
    $("#help").fadeOut(500);
    $("#buttons").fadeOut(500);
    setTimeout(function () {
        document.getElementById("btnBack").style.display = "none";
        document.getElementById("btnHelp").style.display = "block";
        $("#logo").fadeIn(500);
        $("#buttons").fadeIn(500);
    }, 500);
}